<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流水线详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/js/xkube.js?v=1" charset="utf-8"></script>
    <script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <style>
      .layui-quote-red{border-style:solid;border-color:#FF5722;border-width:1px 1px 1px 5px;background:0 0}
      .grid-demo-line{background-color: #31BDEC;height: 2px;width:100%;margin-top:40px;z-index:-999;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
            <blockquote class="layui-elem-quote layui-quote-nm">
              <span class="layui-text" id="createTime"></span>
              <span class="layui-text">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
              <span class="layui-text" id="pipelineId"></span>
              <span class="layui-text">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
              <span class="layui-text" id="triggerMode"></span>
              <span class="layui-text">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
              <span class="layui-text" id="pipelineRunId"></span>
              <span class="layui-text">&nbsp;&nbsp;|&nbsp;&nbsp;状态:</span>
              <span id="status"></span>
            </blockquote>
         <div class="flowStageTpl"></div>            
    </div>
</div>
</body>
<script>

  var pipelineRunId = getQueryString("pipelineRunId");

  //转换时间戳为时间
  function getTime(timestamp) {
      var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear(),
          M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1),
          D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()),
          h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()),
          m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()),
          s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
  }

  //转换状态显示
  function getStatus(status) {
    if (status == "SUCCESS"){
      return '<i class="layui-text layui-font-green layui-font-16">成功</i>';     
    }else if (status == "RUNNING"){
      return '<i class="layui-text layui-font-orange layui-font-16">运行中</i>';
    }else if (status == "FAIL"){
      return '<i class="layui-text layui-font-red layui-font-16">失败</i>';
    }else{
      return status;
    }
  }

  //转换触发模式
  function getTriggerMode(obj) {
    if (obj == 1){
      return "人工触发";      
    }else if (obj == 2){
      return "定时触发";
    }else if (obj == 3){
      return "代码提交触发";
    }else if (obj == 5){
      return "流水线触发";
    }else if (obj == 6){
      return "WEBHOOK触发";
    }else{
      return obj;
    }    
  }

  function ViewLog(objId) {
    //console.log(obj);   
    layer.open({
      title: '日志:'+objId,
      type: 2,
      shade: 0.2,
      maxmin:true,
      shadeClose: true,
      area: ['70%', '90%'],
      content: '/page/cicd/pipelines_log.html'+ location.search+"&jobId="+objId,
    }); 
  }

  function getPipelineRun(){
			$.get('/cicd/pipeline/GetRun' + location.search, function (resp) {
  				if (resp.success == true ) {
              var triggerMode = resp.pipelineRun.triggerMode;
              var pipelineId = resp.pipelineRun.pipelineId;
              var status = resp.pipelineRun.status;
              allStatus = resp.pipelineRun.status;
              var createTime = resp.pipelineRun.createTime;
              var pipelineRunId = resp.pipelineRun.pipelineRunId;

              $('#triggerMode').html('触发模式:'+getTriggerMode(triggerMode));
              $('#pipelineId').html('流水线ID:'+pipelineId);
              $('#createTime').html('创建时间:'+getTime(createTime));
              $('#pipelineRunId').html('运行ID:'+pipelineRunId);
              $('#status').html(getStatus(status));
  
            
              var total = resp.pipelineRun.sources.length;
              //var stagesLength = resp.pipelineRun.stageGroup.length;
              var stagesLength = resp.pipelineRun.stages.length;
              var stages = resp.pipelineRun.stages;
              var jobs0Length = resp.pipelineRun.stages[0].stageInfo.jobs.length;
              var gits = resp.pipelineRun.sources;
              if ( total == 1 && stagesLength >= 2 && jobs0Length == 1) {
                console.log("aa");
                  var headTpl = '<div class="layui-row">'
                  var itemTpl = '';
                  //console.log(stagesLength);
                  $.each(stages,function(i,item){
                    //情况为：一个流水线只有一个任务："Group0-Stage0","Group1-Stage0"的情况
                      $.each(stages[i].stageInfo.jobs,function(j,item2){
                        var statusTpl = '';
                        var colorBlockTpl = '';
                        var logbtnTpl = '<input class="layui-btn layui-btn-xs" type="button" id="logbtn" onclick="ViewLog('+stages[i].stageInfo.jobs[j].id+');" value="日志" />';
                        var jobLength = stages[i].stageInfo.jobs.length;
                        //状态显示
                        if (stages[i].stageInfo.jobs[j].status == "SUCCESS"){
                          statusTpl = '<div class="layui-btn layui-btn-xs layui-btn-primary layui-border-green">成功</div>'
                        }else if (stages[i].stageInfo.jobs[j].status == "FAIL"){
                          //statusTpl = '<div class="layui-btn layui-btn-xs layui-btn-danger">失败</div>'
                          statusTpl = '<input class="layui-btn layui-btn-xs layui-btn-danger" type="button" id="Retrybtn" onclick="RetryJob('+stages[i].stageInfo.jobs[j].id+');" value="重试" />'
                          colorBlockTpl = 'layui-quote-red';
                        }else if (stages[i].stageInfo.jobs[j].status == "RUNNING "){
                          statusTpl = '<div class="layui-btn layui-btn-xs layui-btn-warm">运行中</div>'
                        }else {
                          statusTpl = '<div class="layui-btn layui-btn-xs layui-btn-disabled">'+stages[i].stageInfo.jobs[j].status+'</div>'
                          colorBlockTpl = 'layui-quote-nm';
                          logbtnTpl = 'layui-btn-disabled';
                        }
                        //耗时计算
                        var runTimeTpl = '';
                        var runTime = (stages[i].stageInfo.jobs[j].endTime - stages[i].stageInfo.jobs[j].startTime) / 1000;
                        if (isNaN(runTime)){
                          runTime = 0;
                        }else{
                          runTimeTpl = '<div class="layui-btn layui-btn-xs layui-btn-primary layui-btn-disabled">'+runTime+'s</div>';
                        }
                        //人工卡点判断
                        if (stages[i].stageInfo.jobs[j].actions.length == 0 ){
                          logbtnTpl = '';
                        }else{
                          if (stages[i].stageInfo.jobs[j].actions[0].type == "PassPipelineValidate" || stages[i].stageInfo.jobs[j].actions[0].type =="RefusePipelineValidate" ){
                            statusTpl = '<input class="layui-btn layui-btn-xs" type="button" id="logbtn" onclick="PassJob('+stages[i].stageInfo.jobs[j].id+');" value="通过" />';
                            runTimeTpl = '<input class="layui-btn layui-btn-xs layui-btn layui-btn-danger" type="button" id="logbtn" onclick="RefuseJob('+stages[i].stageInfo.jobs[j].id+');" value="拒绝" />';
                          }

                          if (stages[i].stageInfo.jobs[j].actions[0].type == "RetryPipelineJobRun"){
                            statusTpl = '<input class="layui-btn layui-btn-xs layui-btn-danger" type="button" id="logbtn" onclick="RetryJob('+stages[i].stageInfo.jobs[j].id+');" value="重试" />';
                          }

                          if (stages[i].stageInfo.jobs[j].actions[0].type == "StopPipelineJobRun"){
                            statusTpl = '<input class="layui-btn layui-btn-xs layui-btn-danger" type="button" id="logbtn" onclick="StopJob('+stages[i].stageInfo.jobs[j].id+');" value="取消" />';
                          }

                          if (stages[i].stageInfo.jobs[j].actions[0].type == "SkipPipelineJobRun"){
                            statusTpl = '<input class="layui-btn layui-btn-xs layui-btn-danger" type="button" id="logbtn" onclick="SkipJob('+stages[i].stageInfo.jobs[j].id+');" value="跳过" />';
                          }
                        }
                        if ( i == stagesLength -1 && j == jobLength -1 ) { //不到最后一个都得加上向导符号：==>
                          itemTpl += '<div class="layui-col-xs2">' +
                                '<blockquote class="layui-elem-quote layui-input-inline '+colorBlockTpl+'" style="width:160px;">' +
                                  '<div class="layui-text" style="margin-top:-5px;">'+stages[i].stageInfo.jobs[j].name+'</div><br>' +
                                  '<div class="layui-inline" style="margin-top:-20px;">' +
                                    statusTpl+
                                    runTimeTpl +
                                    logbtnTpl +
                                  '</div>' +
                                '</blockquote>'+
                              '</div>'
                        }else{
                          itemTpl += '<div class="layui-col-xs2">' +
                              '<div class="layui-inline">' +
                                '<blockquote class="layui-elem-quote layui-input-inline '+colorBlockTpl+'" style="width:160px;">' +
                                  '<div class="layui-text" style="margin-top:-5px;">'+stages[i].stageInfo.jobs[j].name+'</div><br>' +
                                  '<div class="layui-inline" style="margin-top:-20px;">' +
                                    statusTpl+
                                    runTimeTpl +
                                    logbtnTpl +
                                  '</div>' +
                                '</blockquote>' +
                                 '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' +  
                                '<div class="layui-input-inline layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon">&#xe65b;</i></div>' +
                              '</div>' +
                          '</div>'       
                        }
                      });
                  });
                var endTpl ='</div>'
                allTpl = headTpl + itemTpl +endTpl;
                $('.flowStageTpl').append(allTpl);
              }else{ //情况为一个流水线多个任务的情况："Group0-Stage0","Group0-Stage1","Group0-Stage2","Group0-Stage3"
                console.log("bb");
                  $.each(stages,function(i,item){
                        var headTpl = '<div class="layui-row">';
                        var itemTpl = '';
                        var jobLength = stages[i].stageInfo.jobs.length;
                        var stageInfoStatus = stages[i].stageInfo.status;
                      $.each(stages[i].stageInfo.jobs,function(j,item2){
                        var statusTpl = '';
                        var colorBlockTpl = '';
                        var logbtnTpl = '<input class="layui-btn layui-btn-xs" type="button" id="logbtn" onclick="ViewLog('+stages[i].stageInfo.jobs[j].id+');" value="日志" />';
                        //状态显示
                        if (stages[i].stageInfo.jobs[j].status == "SUCCESS"){
                          statusTpl = '<div class="layui-btn layui-btn-xs layui-btn-primary layui-border-green">成功</div>'
                        }else if (stages[i].stageInfo.jobs[j].status == "FAIL"){
                          //statusTpl = '<div class="layui-btn layui-btn-xs layui-btn-danger">重试</div>'
                          statusTpl = '<input class="layui-btn layui-btn-xs layui-btn-danger" type="button" id="Retrybtn" onclick="RetryJob('+stages[i].stageInfo.jobs[j].id+');" value="重试" />'
                          colorBlockTpl = 'layui-quote-red';
                        }else if (stages[i].stageInfo.jobs[j].status == "RUNNING "){
                          statusTpl = '<div class="layui-btn layui-btn-xs layui-btn-warm">运行中</div>'
                        }else {
                          statusTpl = '<div class="layui-btn layui-btn-xs layui-btn-disabled">'+stages[i].stageInfo.jobs[j].status+'</div>'
                          colorBlockTpl = 'layui-quote-nm';
                          logbtnTpl = '';
                        }
                        //耗时计算
                        var runTimeTpl = '';
                        var runTime = (stages[i].stageInfo.jobs[j].endTime - stages[i].stageInfo.jobs[j].startTime) / 1000;
                        if (isNaN(runTime)){
                          runTime = 0;
                        }else{
                          runTimeTpl = '<div class="layui-btn layui-btn-xs layui-btn-primary layui-btn-disabled">'+runTime+'s</div>';
                        }
                        //人工卡点判断
                        if (stages[i].stageInfo.jobs[j].actions.length == 0 ){
                          logbtnTpl = '';
                        }else{
                          if (stages[i].stageInfo.jobs[j].actions[0].type == "PassPipelineValidate" || stages[i].stageInfo.jobs[j].actions[0].type =="RefusePipelineValidate" ){
                            statusTpl = '<input class="layui-btn layui-btn-xs" type="button" id="logbtn" onclick="PassJob('+stages[i].stageInfo.jobs[j].id+');" value="通过" />';
                            runTimeTpl = '<input class="layui-btn layui-btn-xs layui-btn layui-btn-danger" type="button" id="logbtn" onclick="RefuseJob('+stages[i].stageInfo.jobs[j].id+');" value="拒绝" />';
                          }

                          if (stages[i].stageInfo.jobs[j].actions[0].type == "RetryPipelineJobRun"){
                            statusTpl = '<input class="layui-btn layui-btn-xs layui-btn-danger" type="button" id="logbtn" onclick="RetryJob('+stages[i].stageInfo.jobs[j].id+');" value="重试" />';
                          }

                          if (stages[i].stageInfo.jobs[j].actions[0].type == "StopPipelineJobRun"){
                            statusTpl = '<input class="layui-btn layui-btn-xs layui-btn-danger" type="button" id="logbtn" onclick="StopJob('+stages[i].stageInfo.jobs[j].id+');" value="取消" />';
                          }

                          if (stages[i].stageInfo.jobs[j].actions[0].type == "SkipPipelineJobRun"){
                            statusTpl = '<input class="layui-btn layui-btn-xs layui-btn-danger" type="button" id="logbtn" onclick="SkipJob('+stages[i].stageInfo.jobs[j].id+');" value="跳过" />';
                          }
                        }
                        
                        //手动触发判断
                        //console.log(stageInfoStatus); 
                        if(stageInfoStatus == "SWITCH_MANUAL" && j == 0) { //当有配置手动触发时在jobs数组的第一个更改status为按钮
                          statusTpl = '<input class="layui-btn layui-btn-xs layui-btn-primary layui-border-black" type="button" id="logbtn" onclick="ManualRun('+stages[i].stageInfo.jobs[j].id+');" value="等待手动触发" />';
                        }                            
                        
                        if ( j < jobLength - 1 ) { //不到最后一个都得加上向导符号：==>                   
                          itemTpl += '<div class="layui-col-xs2">' +
                              '<div class="layui-inline">' +
                                '<blockquote class="layui-elem-quote layui-input-inline '+colorBlockTpl+'" style="width:160px;">' +
                                  '<div class="layui-text" style="margin-top:-5px;">'+stages[i].stageInfo.jobs[j].name+'</div><br>' +
                                  '<div class="layui-inline" style="margin-top:-20px;">' +
                                    statusTpl+
                                    runTimeTpl +
                                    logbtnTpl +
                                  '</div>' +
                                '</blockquote>' +
                                 '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' +  
                                '<div class="layui-input-inline layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon">&#xe65b;</i></div>' +
                              '</div>' +
                          '</div>'
                        }else{
                          itemTpl += '<div class="layui-col-xs2">' +
                                '<blockquote class="layui-elem-quote layui-input-inline '+colorBlockTpl+'" style="width:160px;">' +
                                  '<div class="layui-text" style="margin-top:-5px;">'+stages[i].stageInfo.jobs[j].name+'</div><br>' +
                                  '<div class="layui-inline" style="margin-top:-20px;">' +
                                    statusTpl+
                                    runTimeTpl +
                                    logbtnTpl +
                                  '</div>' +
                                '</blockquote>'+
                              '</div>'          
                        }
                      }); 
                      var endTpl ='</div>'
                      allTpl = headTpl + itemTpl +endTpl;
                      //console.log(allTpl);
                      $('.flowStageTpl').append(allTpl);
                  });                     
              }

          }else{
            layer.msg('请重新刷新',{icon:2});
          }
		  });
  }


    layui.use(['form', 'table','miniTab','element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            element = layui.element,
            table = layui.table;
        getPipelineRun();          
    });
</script>
</html>